<template>
    <div class="chart-box">
        <div>
            <div ref="chart1"></div>
            <span>监控个数</span>
        </div>
        <div>
            <div ref="chart2"></div>
            <span>运行正常</span>
        </div>

        <div>
            <div ref="chart3"></div>
            <span>故障</span>
        </div>

    </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
    name: "AccessControl",
    data() {
        return {
        }
    },
    mounted() {

        const chart1 = echarts.init(this.$refs.chart1)
        const chart2 = echarts.init(this.$refs.chart2)
        const chart3 = echarts.init(this.$refs.chart3)
        this.getOption(100, chart1, 'rgb(123, 188, 255)', 'rgb(27, 69, 255)')
        this.getOption(30, chart2, 'rgb(128, 207, 236)', 'rgb(7, 219, 13)')
        this.getOption(40, chart3, 'rgb(97, 142, 179)', 'rgb(200, 22, 26)')

    },
    methods: {
        getOption(dataValue = 25, chart, color, endcolor) {
            let angle = 0; // 角度

            let option = {
                title: {
                    text: `{v|${dataValue}}{unit|}`,
                    x: "center",
                    y: "center",
                    textStyle: {
                        rich: {
                            v: { fontSize: 25, color: "#fff" },
                            unit: { fontSize: 16, color: "#28edf2" },
                            t: { fontSize: 16, color: "#28edf2" },
                        },
                    },
                },
                series: [
                    /** 绘制内部圆弧-1 <right-top> */
                    {
                        type: "custom",
                        coordinateSystem: "none",
                        renderItem: (params, api) => {
                            return {
                                type: "arc",
                                shape: {
                                    cx: api.getWidth() / 2,
                                    cy: api.getHeight() / 2,
                                    r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
                                    startAngle: ((270 + angle) * Math.PI) / 180,
                                    endAngle: ((360 + angle) * Math.PI) / 180,
                                },
                                style: {
                                    fill: "transparent",
                                    stroke: "rgb(1, 185, 250)",
                                    lineWidth: 2,
                                },
                                silent: true,
                            };
                        },
                        data: [0],
                    },
                    /** 绘制内部圆弧-2 <left-bottom> */
                    {
                        type: "custom",
                        coordinateSystem: "none",
                        renderItem: (params, api) => {
                            return {
                                type: "arc",
                                shape: {
                                    cx: api.getWidth() / 2,
                                    cy: api.getHeight() / 2,
                                    r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
                                    startAngle: ((90 + angle) * Math.PI) / 180,
                                    endAngle: ((180 + angle) * Math.PI) / 180,
                                },
                                style: {
                                    fill: "transparent",
                                    stroke: "rgb(1, 185, 250)",
                                    lineWidth: 2,
                                },
                                silent: true,
                            };
                        },
                        data: [0],
                    },
                    /** 绘制外部圆弧-1 <right-bottom> */
                    {
                        type: "custom",
                        coordinateSystem: "none",
                        renderItem: (params, api) => {
                            return {
                                type: "arc",
                                shape: {
                                    cx: api.getWidth() / 2,
                                    cy: api.getHeight() / 2,
                                    r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.82,
                                    startAngle: ((355 + -angle) * Math.PI) / 180,
                                    endAngle: ((120 + -angle) * Math.PI) / 180,
                                },
                                style: {
                                    fill: "transparent",
                                    stroke: "rgb(1, 185, 250)",
                                    lineWidth: 2.6,
                                },
                                silent: true,
                            };
                        },
                        data: [0],
                    },
                    /** 绘制外部圆弧-2 <left-top> */
                    {
                        type: "custom",
                        coordinateSystem: "none",
                        renderItem: (params, api) => {
                            return {
                                type: "arc",
                                shape: {
                                    cx: api.getWidth() / 2,
                                    cy: api.getHeight() / 2,
                                    r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.82,
                                    startAngle: ((175 + -angle) * Math.PI) / 180,
                                    endAngle: ((300 + -angle) * Math.PI) / 180,
                                },
                                style: {
                                    fill: "transparent",
                                    stroke: "rgb(1, 185, 250)",
                                    lineWidth: 2.6,
                                },
                                silent: true,
                            };
                        },
                        data: [0],
                    },
                    /** 绘制外部圆弧-1-开始圆点 <right-bottom> */
                    {
                        type: "custom",
                        coordinateSystem: "none",
                        renderItem: (params, api) => {
                            let x0 = api.getWidth() / 2;
                            let y0 = api.getHeight() / 2;
                            let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.82;
                            return {
                                type: "circle",
                                shape: {
                                    /** 角度355° 外弧1开始角度 */
                                    cx: x0 + r * Math.cos(((355 + -angle) * Math.PI) / 180),
                                    cy: y0 + r * Math.sin(((355 + -angle) * Math.PI) / 180),
                                    r: 4,
                                },
                                style: {
                                    fill: "rgb(1, 185, 250)",
                                    stroke: "rgb(1, 185, 250)",
                                },
                                silent: true,
                            };
                        },
                        data: [0],
                    },
                    /** 绘制外部圆弧-2-开始圆点 <left-top> */
                    {
                        type: "custom",
                        coordinateSystem: "none",
                        renderItem: (params, api) => {
                            let x0 = api.getWidth() / 2;
                            let y0 = api.getHeight() / 2;
                            let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.82;
                            return {
                                type: "circle",
                                shape: {
                                    /** 角度175° 外弧2开始角度 */
                                    cx: x0 + r * Math.cos(((175 + -angle) * Math.PI) / 180),
                                    cy: y0 + r * Math.sin(((175 + -angle) * Math.PI) / 180),
                                    r: 4,
                                },
                                style: {
                                    fill: "rgb(1, 185, 250)",
                                    stroke: "rgb(1, 185, 250)",
                                },
                                silent: true,
                            };
                        },
                        data: [0],
                    },
                    /** 刻度仪表盘 */

                    /** 饼图 */
                    {
                        name: "已完成",
                        type: "pie",
                        startAngle: 90,
                        z: 0,
                        label: {
                            position: "center",
                        },
                        radius: ["65%", "50%"],
                        silent: true,
                        animation: false, // 关闭饼图动画
                        data: [
                            {
                                value: dataValue,
                                itemStyle: {
                                    color: {
                                        type: "linear",
                                        x: 0,
                                        y: 0.2,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [
                                            { offset: 0, color: color },
                                            { offset: 1, color: endcolor },
                                        ],
                                    },
                                },
                            },
                            {
                                name: "未完成",
                                value: 100 - dataValue,
                                label: { show: false },
                                itemStyle: { color: "#00374C" },
                            },
                        ],
                    },
                ],
            };

            function draw() {
                angle = angle + 0.5;
                chart.setOption(option, true);
                requestAnimationFrame(draw)
            }

            draw()
            /**
             * 圆弧角度
              ◜    270°   ◝  
            180°    ↻      360°
              ◟    90°    ◞
             * 
            
             */


        }
    }
}
</script>

<style lang="less" scoped>
.chart-box {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 20px 0 0;

    &>div {
        height: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        div{
            width: 100%;
            height: 150px;
        }
    }

    span {
        font-size: 18px;
        text-align: center;
        margin: 0 0 30px;
        color: #00FFFF
    }
}
</style>